<template>
    <div class="page" ref="page">
        <div class="menuTab">
            <header-tab :config="tabConfig" :selectSubTypeFn="selectSubType"></header-tab>
            <div class="menuTab-search" @click="flagSearch"><img src="../assets/icon-search.png"
                                                                 class="menuTab-search-img"/></div>
        </div>

        <transition name="fade">
            <div class="search" v-if="flagSearchValue">
                <div class="search-left">
                    <input type="text" @input="searchKey"   v-model="keywords" placeholder="搜索文章名称">
                </div>
                <div class="search-right">
                    <img @click="searchKey" src="../assets/index-search-btn2.png"  class="search-right-btn"/>
                </div>
            </div>
        </transition>
        <div class="share-div" :style="{'top':shareTop +'px'}" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>

        <div class="list loadmore-wrapper"
             ref="wrapper" :style="{ height: wrapperHeight + 'px' }"
             v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="50"
        >
            <div class="list-item" v-for="(item,index) in listArr">
                <router-link :to="'/article/'+item.article_id">
                    <img class="list-item-img" :src="item.img" alt="">
                    <!--<img class="list-item-play-btn" src="../assets/play-btn.png" alt="" >-->
                    <h3 class="list-item-title">{{item.title}}</h3>
                </router-link>
                <p class="list-item-date">{{item.create_time}}</p>
                <div class="btns">
                    <span class="btns-item"><img class="btns-item-img" src="../assets/icon-hist.png" alt="">{{item.browse}}</span>
                    <span class="btns-item" @click="like(index)"><img class="btns-item-img"
                                                                      src="../assets/icon-like.png" alt="">{{item.fabulous}}</span>
                    <span class="btns-item"><img class="btns-item-img" src="../assets/icon-comment22.png" alt="">{{item.comment_num}}</span>
                </div>
                <img @click="shareFn(index)" class="list-item-share" src="../assets/icon-share.png" alt="">
            </div>
            <div v-show="loading && !loadEnd" class="loadmore-loading">
                <mt-spinner type="fading-circle"
                            style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>
                加载中...
            </div>
            <div v-show="loadEnd" class="loadmore-loading">
                暂无更多数据...
            </div>
        </div>
        <TabBar ref="tabBar" :curr="tabBarCurr"></TabBar>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import headerTab from '../components/header-tab.vue'
    import TabBar from "../components/TabBar"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    export default {
        name: "guideline",
        components: {
            headerTab,
            TabBar
        },
        data() {
            return {
                url: config.url,
                flagSearchValue: false,
                keywords: '',
                keywordsTime:0,
                tabCurr: 1,
                tabConfig: {
                    sub: {
                        arr: [], //{cn_name: '所有', id: 0},
                        activeIndex: 0
                    }
                },
                tabBarCurr: 1, //底部导航
                shareView: false,//分享
                shareTop: 0,

                class_id: 1,
                // 分页参数
                listArr: [],
                totalPage: 0,
                pageSize: 10,
                page: 1,
                loadEnd: false,
                loading: false,// 为 true， bottom-method 就不会再次执行加载更多
                wrapperHeight: 0,
            }
        },
        methods: {
            selectSubType(subType) {
                this.class_id = subType;
                this.page = 1;
                this.listArr = [];
                this.keywords='';
                this.loadDataMore();
                //}
            },
            flagSearch() {
                this.flagSearchValue = !this.flagSearchValue;
            },
            shareFn(index) {
                if(!this.shareView){
                    this.shareTop = document.documentElement.scrollTop
                    var item = this.listArr[index]
                    this.share({
                        desc: item.title,
                        link: this.url + '/quick_help_wap1/#/article/' + item.article_id, // 分享链接
                        imgUrl: item.img, // 分享图标
                    })
                }

                this.shareView = !this.shareView;

            },
            // 获取tab分类、tag
            getTab() {
                this.axios.post('wapclass')
                    .then(res => {
                        var tabarr = res.data.map(item => {
                            return {cn_name: item.name, id: item.id};
                        })
                        //tabarr.unshift({cn_name: '所有', id: 0});
                        this.tabConfig.sub.arr = tabarr;
                    })
                    .catch(err => console.log(err));
            },
            // 搜索
            searchKey(){
                var _that=this;
                if(new Date().getTime()-_that.keywordsTime>300){
                    _that.listArr=[];
                    _that.page=1;
                    _that.loadEnd=false;
                    _that.loading=true; // 为 true， bottom-method 就不会再次执行加载更多
                    _that.loadDataMore();
                    _that.keywordsTime=new Date().getTime();
                }

            },
            loadDataMore() {
                setTimeout(() => {
                    this.getList();
                }, 300);
            },
            getList() {
                let _that = this;
                let params = {
                    class_id: _that.class_id,
                    search: _that.keywords,
                    pagelimit: _that.pageSize,
                    pagenum: _that.page
                }
                _that.loading = true;
                _that.axios.postAll('waparticle', params)
                    .then(res => {
                        if (res) {
                            if (res.data.code == 0 && res.data.data) {
                                let listArr = _that.listArr;
                                let listArrtext = JSON.stringify(listArr);
                                var reg = /^(http|https):\/\//;
                                res.data.data.data.forEach(item => {
                                    if (listArrtext.indexOf(JSON.stringify(item)) == -1) {
                                        if (!reg.test(item.img)) {
                                            item.img = _that.url + item.img
                                        }
                                        listArr.push(item);
                                    }
                                })
                                _that.page += 1
                                _that.totalPage = res.data.data.totalpage
                                _that.listArr = listArr;

                                if (_that.page <= _that.totalPage) {
                                    _that.loading = false;
                                    _that.loadEnd = true;
                                }
                                if (res.data.data.data.length < _that.pageSize) {
                                    _that.loadEnd = true;
                                }

                            } else {
                                _that.loadEnd = true;
                            }
                            if (_that.$store.state.token) {//分享
                                _that.share({
                                    desc: "旅行攻略",
                                    link:undefined, // 分享链接
                                    imgUrl:undefined, // 分享图标
                                });
                            }
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    });
            },
            // 点赞
            like(index) {
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                    return;
                }
                var item = this.listArr[index]
                var params = {
                    article_id: item.article_id
                }
                this.axios.post('wapfabulous',params)
                    .then(res => {
                       Toast({message: res.msg, duration: 1000});
                       if(res.msg=='点赞成功'){
                           this.listArr[index].fabulous+=1
                       }else{
                           this.listArr[index].fabulous-=1
                       }
                    })
                    .catch(err => console.log(err));
            },
            // 分享
            share(obj) {
                wxShare({
                    title: '快帮行', // 分享标题
                    desc: obj.desc, // 分享描述
                    link: obj.link, // 分享链接
                    imgUrl: obj.imgUrl, // 分享图标
                    debug: false
                }, () => {//分享成功后的回调函数
                    //Toast({message: '分享成功！', duration: 1500});
                    console.log('分享成功')
                    this.shareView = false;
                    this.share({
                        desc: this.tabConfig.sub.arr[0].cn_name, // 分享描述
                        link:undefined,
                        imgUrl:undefined,
                    })
                });
            }
        },
        mounted() {
            this.getTab()//获取分类
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - this.$refs.tabBar.$el.offsetHeight;
            this.keywords=this.$route.query.keyword
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .page {
        background: $bgcolor1;
        min-height: 100%;
    }

    .menuTab {
        position: relative;
        height: rpx(100);
        background: $color0;
        overflow: hidden;
        &-search {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 9999;
            width: rpx(90);
            height: rpx(100);
            padding-top: rpx(30);
            padding-left: rpx(10);
            font-size: rpx(34);
            color: #696969;
            //box-shadow: 0 0 rpx(20) $color2;

            &-img {
                width: rpx(48);
                height: rpx(48);
                margin-left: rpx(20);
            }
        }
    }

    .search {
        display: flex;
        align-items: center;
        padding: rpx(40) rpx(30);
        background: $color0;
        border-top: 1px solid $color2;
        &-left {
            flex: 1;
            input {
                box-sizing: border-box;
                border: rpx(3) solid $color3;
                border-right: none;
                border-radius: rpx($radius10) 0 0 rpx($radius10);
                padding: 0 rpx(20);
                width: 100%;
                height: rpx(90);
                line-height: 1;
                font-size: rpx(30);
            }
        }
        &-right {
            background: $color3;
            border-radius: 0 rpx($radius10) rpx($radius10) 0;
            width: rpx(140);
            height: rpx(90);
            text-align: center;
            &-btn {
                margin-top: rpx(23);
                width: rpx(44);
                height: rpx(44);
            }
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .list {
        &-item {
            position: relative;
            margin-top: rpx(40);
            background: $color0;

            &-img {
                width: 100%;
                height: rpx(400);
                z-index: 8;
            }
            &-play-btn {
                position: absolute;
                left: 50%;
                top: rpx(152);
                margin-left: rpx(-48);
                width: rpx(96);
                height: rpx(96);
                z-index: 9;
            }
            &-title {
                padding: rpx(20) rpx(30);
                font-size: rpx(36);
                line-height: 130%;
            }
            &-date {
                padding: rpx(10) rpx(30);
                font-size: rpx(28);
                color: $color5;
            }
            &-share {
                position: absolute;
                right: rpx(30);
                bottom: rpx(30);
                width: rpx(48);
                height: rpx(48);
            }
        }
        .btns {
            padding: rpx(20) rpx(30) rpx(30);
            &-item {
                margin-right: rpx(30);
                font-size: rpx(28);
                color: $color5;
                &-img {
                    margin-right: rpx(10);
                    width: rpx(32);
                    height: rpx(32);
                }
            }

        }
    }

    .loadmore-wrapper {
        margin-top: -1px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .loadmore-loading {
        text-align: center;
        height: rpx(120);
        line-height: rpx(120);
        color: $color5;
    }

    .loadmore-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

    //分享
    .share-div {
        position: absolute;
        background: rgba(0, 0, 0, .5);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999;
        width: 100%;
        height: 100%;
        text-align: center;
        &-img {
            margin-top: rpx(30);
            width: rpx(500);
            height: rpx(220);
        }
    }

</style>